<script setup lang="ts">

import { onMounted, onUnmounted, ref, watch } from 'vue'
import { type ECharts, graphic, init } from 'echarts'
import type { Sort, Trend, TrendSeriesData } from '@/types/eCommerce'

const props = defineProps<{
  trendData: Trend[]
}>()
const echarts_ref = ref<HTMLDivElement>()
let myEcharts: ECharts


const initCharts = () => {
  // 初始化数据
  const initOption = {
    grid: {
      top: '15%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        interval: 0
      }
    },
    yAxis: {
      type: 'value'
    }, series: [{
      type: 'line'
    }]
  }
  myEcharts = init(echarts_ref.value as HTMLDivElement)
  myEcharts.setOption(initOption, true)
}


const dataEcharts = (index: number = 0) => {
  const xAxisData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  const colorArr1 = ['rgba(11,168,44,0.5)', 'rgba(44,110,255,0.5)', 'rgba(22,242,217,0.5)', 'rgba(254,33,30,0.5)', 'rgba(250,165,0,0.5)']
  const colorArr2 = ['rgba(11,168,44,0)', 'rgba(44,110,255,0)', 'rgba(22,242,217,0)', 'rgba(254,33,30,0)', 'rgba(250,165,0,0)']
  const legendData: string[] = []
  const seriesData: TrendSeriesData[] = []
  if (trendTitle.value.length === 0) {
    value.value = props.trendData[0].title
    props.trendData.forEach(item => {
      trendTitle.value.push({
        label: item.title,
        value: item.title
      })
    })
  }
  props.trendData[index].data.forEach((item, index) => {
    legendData.push(item.name)
    const series = {
      name: item.name,
      type: 'line',
      data: item.data,
      stack: 'map',
      smooth: true,
      symbol: 'none',
      areaStyle: new graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: colorArr1[index]
        }, {
          offset: 1,
          color: colorArr2[index]
        }
      ])
    }
    seriesData.push(series)
  })
  const dataOption = {
    xAxis: {
      data: xAxisData
    },
    legend: {
      data: legendData
    },
    series: seriesData
  }
  myEcharts.setOption(dataOption)
}

//屏幕适配
const adapterEcharts = () => {
  const width = echarts_ref.value!.offsetWidth
  const adapterOption = {
    series: {
      barWidth: width / 100 * 5
    }
  }
  myEcharts.setOption(adapterOption)
  myEcharts.resize()
}

const value = ref()
const trendTitle = ref<Sort[]>([])
const handleChange = (value: any) => {
  trendTitle.value.forEach((item, index) => {
    if (value[0] === item.value) {
      dataEcharts(index)
      return
    }
  })
}

const loading = ref(true)
watch(props, () => {
  dataEcharts()
  setTimeout(() => {
    loading.value = false
  },300)
})
onMounted(() => {
  initCharts()
  adapterEcharts()
  window.addEventListener('resize', adapterEcharts)
})

onUnmounted(() => {
  window.removeEventListener('resize', adapterEcharts)
})
</script>

<template>
  <div class="echarts" v-loading="loading">
    <div class="Button">
      <el-cascader v-model="value" :options="trendTitle" @change="handleChange" />
    </div>
    <div ref="echarts_ref" class="echartsDom"></div>
  </div>
</template>

<style scoped>
@import "@/assets/style/componentsEcharts.css";
</style>